import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Button,
    ToastAndroid,
    TextInput,
    Image,
    ImageBackground,
    StyleSheet,
} from 'react-native';


export default class LoginPage extends Component {
    constructor(){
        super();
        this.state={
            star:[0,1,2,3,4],
            account:'',
            pass:''
        }
    };
    componentDidMount(){
        
    }
    static navigationOptions={
        header:null,
        //console.log(navigation)
        /*title : '登录',
        headerTitleStyle: {
            flex:1,
            textAlign:'center'
            //backgroundColor: '#f4511e',
            //alignSelf:'center'
        },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            }*/
    };/**/
    _tapBtn=(ev)=>{
        //Alert.alert('hello')
        //alert('aaa')
        let {state:{account,pass}}=this;
        if(account===''){
            ToastAndroid.show("用户名不得为空！", ToastAndroid.SHORT);
            console.warn('开发调试中。。。')
            return false;
        }else if(pass===''){
            ToastAndroid.show("密码不得为空！", ToastAndroid.SHORT);
            console.warn('开发调试中。。。')
            return false;
        }else{
            ToastAndroid.show("请求成功，即将跳转！", ToastAndroid.SHORT);
            this.props.navigation.navigate('Main')
        }
        
        //this.props.navigation.navigate('Home')
    };
    _tapStar(num){
        //console.log(num)
        this.setState({
            num
        })
        
    };
    render() {
        return (
            <ImageBackground source={require('../../img/mbg.jpg')} style={{width: '100%', height: '100%'}}>
                <View style={styles.container}>
                    <TextInput 
                        placeholder="Email"
                        placeholderTextColor="#fff"
                        underlineColorAndroid='transparent'
                        style={styles.textInput}
                        onChangeText={(account) => this.setState({account})}
                        value={this.state.account}
                    />     
                    <TextInput 
                        placeholder="Password"
                        placeholderTextColor="#fff"
                        secureTextEntry={true}
                        underlineColorAndroid='transparent'
                        style={styles.textInput}
                        onChangeText={(pass) => this.setState({pass})}
                        value={this.state.pass}
                    />       
                    <TouchableOpacity 
                        style={styles.textLogin}
                        underlayColor="rgba(34,26,38,0.5)"
                        onPress={this._tapBtn}>
                        <Text style={styles.ftac}>Login</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        );
    }
}
/** 
 * <View style={styles.star}>
        {
            this.state.star.map((item,ind)=>
                <Text key={ind} 
                    style={[this.state.num>=ind && styles.textAct,styles.text,{marginRight:10}]}
                    onPress={this._tapStar.bind(this,ind)}
                >★</Text>
            )
        }
    </View> 
  */
//<Image style={[styles.img,{marginTop:20}]} source={{uri:'http://via.placeholder.com/400x1000'}}/>
const styles = StyleSheet.create({
    container: {
        flex: 1,
        //flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    ftac:{
        textAlign:'center',
        color:'#fff',
    },
    textLogin:{
        width:300,
        paddingVertical:15,
        marginVertical:10,
        borderRadius:25,
        backgroundColor:'rgba(0,0,0,.7)'
    },
    textInput:{
        width:300,
        color:'#fff',
        paddingHorizontal:20,
        marginVertical:10,
        borderRadius:25,
        backgroundColor:'rgba(0,0,0,.7)'
    },
    btn:{
        marginVertical:20,
        marginRight:20,
        marginLeft: 50,
        width:300,
    },
    img:{
        width:400,
        height:1000 
    },
    textAct:{
        color:'red'
    },
    text:{
        fontSize:40,
    },
    star:{
        flexDirection:'row'
    }
});